<template>
	<view class="chart_box">
		<view class="chart_container">
			<view class="head">
				<view class="left">
					<image class="img-tz" src="../../../../static/ring/chart/huifu.png" mode=""></image>
				</view>
				<image class="right-arrow-icon" src="/static/icon/right.svg" mode="widthFix" @click="gotoDataPage">
				</image>
			</view>

			<view class="refresh-tip">今日恢复程度良好，可以进行适当运动</view>
			<view class="data">
				<view class="left-data">
					<view class="today-index">今日恢复指数：{{ todayRecoveryIndex }}</view>
					<view class="weekly-average-index">周平均恢复指数：{{ weeklyAverageRecoveryIndex }}</view>
				</view>
				<image class="right-progress" src="../../../../static/ring/chart/huifubg.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryMyStepInfoByDay
	} from "@/api/ring/chart.js";
	import dayjs from "dayjs";
	import store from "@/store/index.js";

	export default {
		props: {
			date: String,
		},
		data() {
			return {
				activityData: [{
						title: "距离",
						value: "--",
						unit: "分",
						color: "#EEE3A1",
						isLast: false,
					},
					{
						title: "消耗",
						value: "--",
						unit: "卡",
						color: "#F1AC68",
						isLast: false,
					},
					{
						title: "步数",
						value: 0,
						unit: "步",
						color: "#85CB98",
						isLast: true,
					},
				],
				todayRecoveryIndex: "--",
				weeklyAverageRecoveryIndex: "--",
				progressRatio: 0,
			};
		},

		computed: {
			isLogin() {
				return store.state.userToken;
			},
		},

		methods: {
			getTitle() {
				return "recover";
			},
			updateChartData(date) {
				if (!this.isLogin) return;
				date = date || this.date || dayjs().format("YYYY-MM-DD HH:mm:ss");
				queryMyStepInfoByDay({
						dateStr: dayjs(date).format("YYYY-MM-DD"),
						offsetMinutes: new Date().getTimezoneOffset(),
					})
					.then((res) => {
						console.log("queryMyStepInfoByDay", res.data);

						const distance = this.activityData[0];
						const calories = this.activityData[1];
						const steps = this.activityData[2];

						distance.value = !res.data.distanceSum ? 0 : res.data.distanceSum.toFixed(1);
						calories.value = !res.data.calSum ? 0 : res.data.calSum.toFixed(1);
						steps.value = res.data.sum || 0;

						// 假设这里从后端获取今日恢复指数和周平均恢复指数
						this.todayRecoveryIndex = res.data.todayRecoveryIndex || "--";
						this.weeklyAverageRecoveryIndex = res.data.weeklyAverageRecoveryIndex || "--";
						if (this.weeklyAverageRecoveryIndex !== 0 && this.todayRecoveryIndex !== "--") {
							this.progressRatio = (this.todayRecoveryIndex / this.weeklyAverageRecoveryIndex) * 100;
						}
					})
					.catch((error) => console.log(error));
			},
			gotoDataPage() {
				const date = dayjs().format("YYYY-MM-DD");
				// 如果是今天 且同步时间不同 意味着今天没有对应的同步数据
				uni.navigateTo({
					url: `/pages/ring/detail/index?type=Pressure&title=恢复&date=` + date
				});
			},
		},
		mounted() {
			this.updateChartData();
		},
	};
</script>

<style lang="scss" scoped>
	.chart_box {
		width: 100%;
		height: 100%;
		color: black;

		.w-70rpx {
			width: 48rpx;
		}

		.w-40rpx {
			width: 40rpx;
		}

		.chart_container {
			padding: 20rpx 30rpx;

			.head {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				margin-bottom: 8rpx;

				.left {
					flex: 1;
					display: flex;
					align-items: center;

					.img-tz {
						width: 104rpx;
						height: 44rpx;
						margin-right: 12rpx;
					}

					.img-tip {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.right-arrow-icon {
					width: 20rpx;
					height: 20rpx;
				}
			}

			.right-arrow-icon {
				width: 32rpx;
				height: 32rpx;
			}

			.refresh-tip {
				font-size: 24rpx;
				color: #999999;
				margin-top: 8rpx;
				margin-bottom: 28rpx;
			}

			.data {
				display: flex;
				justify-content: space-between;

				.left-data {

					font-size: 28rpx;
					font-weight: 500;

					.today-index {
						color: rgba(0, 0, 0, 1);
						margin-bottom: 10rpx;
					}


					.weekly-average-index {
						color: rgba(102, 102, 102, 1);
					}
				}

				.right-progress {
					height: 56rpx;
					width: 254rpx;
					display: block;
					align-self: flex-end;
				}


			}
		}
	}
</style>